.pillsRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mantine-spacing-xs);
  align-items: center;
  border: 1px dashed var(--mb-color-saturated-blue) !important;
  background-color: var(--mb-color-background-hover-light);
  border-radius: var(--mantine-radius-md);
  transition: box-shadow 250ms ease;
  min-height: 3.25rem;
}

.max {
  cursor: not-allowed;
}

.dragOver:not(.max) {
  box-shadow: 0 0 2px 1px var(--mb-color-saturated-blue);
  cursor: none !important;
}

.pill {
  display: flex;
  flex: 0 0 auto;
  padding-inline: 0.5rem;
  height: 100%;
  background: var(--mb-color-bg-white);
  border: 1px solid var(--mb-color-border);
  border-radius: var(--mantine-radius-xl);
  cursor: pointer;
  color: var(--mb-color-text-primary);
  font-weight: bold;
  min-width: 4rem;
  text-overflow: ellipsis;
  overflow: hidden;

  > span {
    width: 100%;
    flex: 1;
  }
}

.dragging {
  opacity: 0.6;
}

.inputField {
  min-width: 1rem;
  height: 2rem;
}
